<template>
    <q-btn round flat size="12" icon="notification_important">
        <q-badge color="red" floating>4</q-badge>
        <q-popup-proxy>
            <q-card class="notice-card">
                <q-card-section>
                    <div class="text-h6 float-left">通知</div>
                    <div class="float-right" @click="deleteNotice('')">
                        <q-btn   flat class="text-blue">清除所有</q-btn>
                    </div>
                </q-card-section>
                <q-scroll-area
                        class="notice-scroll-area"
                        :thumb-style="thumbStyle"
                >
                    <q-list v-for="(item,index) in noticeMsgList" :key="index">
                        <q-item :key="index" v-ripple clickable>
                            <q-item-section avatar top>
                                <q-avatar><img :src="item.img"></q-avatar>
                            </q-item-section>

                            <q-item-section>
                                <q-item-label lines="1">{{ item.msg }}</q-item-label>
                                <q-item-label caption>{{item.time}}</q-item-label>
                            </q-item-section>
                            <q-item-section side top>
                                <q-btn @click="deleteNotice(item)" icon="close" flat size="8px" round/>
                            </q-item-section>

                        </q-item>
                    </q-list>
                </q-scroll-area>
            </q-card>
        </q-popup-proxy>
    </q-btn>
</template>

<script>

  export default {
    name: "NoticeIndex",
    computed: {
      thumbStyle () {
        return {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: 'white',
          width: '5px',
          opacity: 0.75
        }
      }
    },
    data () {
      return {
        tab: "notice",
        noticeCount: "1",
        msgCount: "2",
        noticeMsgList: [
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '蒂姆·库克回复了你的邮件'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          },
          {
            id: 1,
            img: require('../../../assets/logo/60_60/11.png'),
            name: '',
            time: '2019-05-08 14:33:18',
            msg: '乔纳森·伊夫邀请你参加会议'
          }
        ]
      }
    },
    methods: {
      deleteNotice (e) {
        this.$q.dialog({
          title: '删除？',
          message: e ? '确定删除消息 “' + e.msg + "” 吗" : '确定清楚所有消息吗',
          ok: {
            flat: true,
            label: '确定'
          },
          cancel: {
            flat: true,
            label: '取消'
          },
          persistent: true
        }).onOk(() => {
          this.$q.notify({
            position:'center',
            message:'清除成功',
            color:'green',
            timeout:1000
          })
        })
      }
    }
  }
</script>

<style scoped>
    .notice-card {
        height: 400px;
        width: 320px
    }

    .notice-scroll-area {
        height: 310px;
        max-width: 300px;
    }
</style>
